<template>
	<view class="usermsg-container">
		<pagehead>个人信息</pagehead>
		<view class="usermsg-content">
			<view class="usermsg-content-msg" @tap="updateAvatar()" v-if="usermsg">
				<view class="usermsg-content-title">
					头像
				</view>
				<view class="usermsg-content-userhead"  v-if="usermsg.head_photo">
					<init-image :src="imgShow(usermsg.head_photo)" mode="" />
				</view>
				<view class="usermsg-content-userhead" v-else
					:style="{background:'url('+IMAGE_STATIC+'/images/logo.png) 100% /cover no-repeat'}">
				</view>
			</view>
			<view class="usermsg-content-msg" @tap="updateNickName()">
				<view class="usermsg-content-title">
					昵称
				</view>
				<view class="" v-if="isShowName">
					<input type="text" v-model="nickName" @blur="getBlur()" placeholder="请输入要修改的昵称" class="usermsg-content-userinput">
				</view>
				<view class="" v-else>
					<view class="usermsg-content-usertext"  v-if="usermsg.nick_name">{{usermsg.nick_name}}</view>
					<view class="usermsg-content-usertext"  v-else>启航掌柜用户</view>
				</view>
			</view>
			<view class="usermsg-content-msg">
				<view class="usermsg-content-title">
					电话号码
				</view>
				<view class="usermsg-content-usertext"
				  v-if="usermsg.sys_user_account">{{usermsg.sys_user_account}} 
					</view>
				<view class="usermsg-content-usertext" v-else>******</view> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				IMAGE_STATIC: this.$url.assetsPath,
				IMAGE_PREFIX: this.$url.urlPath,
				usermsg: {},
				isShowName: false,
				nickName: '',
				qiniu_token: '',
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				this.getUserInfo();
				this.getQiNiuToken();
			},
			// 修改头像
			submit(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						let avatar = res.tempFilePaths[0];
						// let avatar = res.tempFiles;
						console.log("src:",avatar)
						let now_time = new Date().getTime();
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com', 
							filePath: avatar,
							name: 'file',
							formData: {
								'key': now_time,
								'token': this.qiniu.token,
							},
							success: (uploadFileRes) => {
								let uploadImgUrl = JSON.parse(uploadFileRes.data).key;
								let backUrl = this.qiniu.domain + '/' +uploadImgUrl;
								this.avatar = backUrl;
								if(this.avatar){
									this.avatarSubmit();
								}
								uni.hideLoading();
							},
							fail: (error) => {
								console.log(error);
								uni.hideLoading();
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});
					},
					fail: function() {
						console.log('上传图片接口调用失败');
						return;
					}
				});
			},
			// 修改头像
			avatarSubmit(){
				var data = {};
				data['avatar'] = this.avatar;
				console.log("data：",data);
				this.$Ajax('/api/user/updUserInfo',
				data,
				res => {
						this.$tools.toast('修改头像成功');
						this.hidePopup('avatarPopup');
						this.getUserInfo();
					}, err =>{
						
					}
				)
			},
			// 修改昵称
			updateNickName(){
				let that = this;
				that.isShowName = true;
			},
			getBlur(){
				let that= this;
				if(!that.nickName){
					that.$tools.toast("请输入要修改的昵称");
					return that.isShowName = false;
				}
				if(that.nickName.length > 6){
					that.$tools.toast("昵称字数超过最大值");
					return that.isShowName = false;
				}
				let userInfoUpdateQo = {
					// "avatar": String(that.usermsg.head_photo),
					"nick_name": String(that.nickName)
				}
				console.log('userInfoUpdateQo',userInfoUpdateQo)
				that.$Ajax('/api/user/setting/modifyUserInfo', userInfoUpdateQo, res => {
					if(res.success){
						that.usermsg.nick_name = that.nickName
						that.$tools.toast('修改成功');
						that.isShowName = false;
					}
				}, err => {}, 'PUT')
			},
			// 获取头像
			updateAvatar(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths[0]);
						let now_time = new Date().getTime();
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com', 
							filePath:  res.tempFilePaths[0],
							name: 'file',
							formData: {
								// 'key': now_time,
								'token': that.qiniu_token,
							},
							success: (uploadFileRes) => {
								console.log("uploadFileRes：",uploadFileRes);
								let uploadImgUrl = JSON.parse(uploadFileRes.data).key;
								let backUrl = that.qiniu_domain + uploadImgUrl;
								console.log('成功的图片链接',backUrl)
								// that.usermsg.head_photo = backUrl;
								let userInfoUpdateQo = {
									"head_photo": String(uploadImgUrl),
								}
								that.$Ajax('/api/user/setting/modifyUserInfo', userInfoUpdateQo, res => {
									if(res.success){
										that.getUserInfo();
										that.$tools.toast('修改成功');
									}
								}, err => {}, 'PUT')
								uni.hideLoading();
							},
							fail: (error) => {
								console.log(error);
								uni.hideLoading();
							},
							complete: () => {
								setTimeout(function() {
									uni.hideLoading();
								}, 250);
							},
						});
					}
				});
			},
			// 获取七牛云token
			getQiNiuToken() {
				let that = this;
				that.$Ajax('/api/common/qiniu/getQiNiuToken', {}, res => {
					if(res.success){
						that.qiniu_token =  res.data.qiniu_token;
						that.qiniu_domain = res.data.qiniu_domain;
					}
				}, err => {})
			},
			// // 查询用户信息
			// getUserInfo() {
			// 	uni.showLoading({title:"加载中"});
			// 	this.$Ajax('/api/user/info/getRealUserInfo', {}, res => {
			// 		uni.hideLoading();
			// 		if(res.success){
			// 			this.usermsg = res.data.userInfo
			// 			uni.setStorageSync('usermsg', this.usermsg);
			// 			// if((this.usermsg.head_photo).indexOf('https')){
			// 			// 	this.usermsg.head_photo = this.usermsg.head_photo;
			// 			// }else{
			// 			// 	this.usermsg.head_photo = that.qiniu_domain + '/' + this.usermsg.head_photo ;
			// 			// }
			// 			this.usermsg.head_photo = this.qiniu_domain + this.usermsg.head_photo ;
			// 			console.log('usermsg',this.usermsg);
			// 		}
			// 	}, err => {uni.hideLoading();})
			// 	uni.hideLoading();
			// },
			chooseAvatar(e){
				console.log("头像e：",e.detail.avatarUrl);
			},
		}
	}
</script>

<style scoped lang="scss">
	.usermsg-container {
		width: 100%;
		height: 100vh;
		background: #F4F4F4;

		.usermsg-content {
			width: 100%;
			height: 366rpx;
			background-color: #ffffff;
			margin: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.usermsg-content-msg {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.usermsg-content-title {
					margin-left: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
				}

				.usermsg-content-userhead {
					margin-right: 40rpx;
					width: 80rpx;
					height: 80rpx;
					background: url($uni-static-dir+'/userimage/usermsghead.png') 100% no-repeat;
					background-size: 100% 100%;
					border-radius: 50%;

				}

				.usermsg-content-usertext {
					margin-right: 40rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333;
					@include flexLeft;
				}
				.arrows{
                width:32rpx ;
                height: 32rpx;
                background: url($uni-static-dir+'/images/arrow-right.png') 100% no-repeat;
                background-size: 100% 100%;
            }
				.usermsg-content-userinput{
					margin-right: 40rpx;
					flex: 1;
					text-align: right;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
				}
			}
		}

		.usermsg-idconfrim-block {
			width: 100%;
			height: 98rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.usermsg-idconfrim-title {
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #232323;
				margin-left: 40rpx;
			}

			.usermsg-idconfrim-icon-block {
				display: flex;
				align-items: center;

				.usermsg-idconfrim-icon-text {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #888B95;
				}

				.usermsg-idconfrim-icon-image {
					width: 36rpx;
					height: 36rpx;
					background: url($uni-static-dir+'/userimage/usermsgarrows.png') 100% no-repeat;
					background-size: 100% 100%;
					margin-left: 15rpx;
					margin-right: 40rpx;
				}
			}
		}
	}
</style>
